<template>
<el-tabs type="border-card"  v-model="tabName" @tab-click="request">
    <!-- 未注销显示内容 -->
    <el-tab-pane label="未注销" name="uncancelled">
      <SearchAdd @send-data="searchReservation" :show="1" :cancellation='cancellation' :flag="0"></SearchAdd>
      <el-table
        ref="filterTable,multipleTable"
        tooltip-effect="dark"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @row-click="test"
      >
        <el-table-column type="selection" :width="untableWidth"></el-table-column>
        <el-table-column prop="reservationId" label="ID" :width="untableWidth" align="center"></el-table-column>
        <el-table-column prop="reservationNumber" label="预约编号" :width="untableWidth"> </el-table-column>
        <el-table-column prop="doctorName" label="医生姓名" :width="untableWidth"> </el-table-column>
        <el-table-column prop="registrationFee" label="挂号费用" :width="untableWidth"> </el-table-column>
        <el-table-column prop="patientName" label="就诊人姓名" :width="untableWidth"> </el-table-column>
        <el-table-column prop="idCardType" label="证件类型" :width="untableWidth"> </el-table-column>
        <el-table-column prop="idCardNumber" label="有效证件号" :width="untableWidth"> </el-table-column>
        <el-table-column prop="reservationTime" label="预约时间" :width="untableWidth"> </el-table-column>
        <el-table-column label="操作" :width="untableWidth">
          <!-- <el-button type="primary" @click="openUpdateDialog">修改</el-button> -->
          <el-button type="danger" @click="cancellation">注销</el-button>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <!-- 已注销显示内容 -->
    <el-tab-pane label="已注销"  name="cancelled">
      <SearchAdd :flag="1" :show="1" @send-data="searchReservation"></SearchAdd>
      <el-table
          ref="filterTable,multipleTable"
          tooltip-effect="dark"
          :data="tableData"
          style="width: 100%"
      >
        <el-table-column prop="reservationId" label="ID" :width="tableWidth"></el-table-column>
        <el-table-column prop="reservationNumber" label="预约编号" :width="tableWidth"> </el-table-column>
        <el-table-column prop="doctorName" label="医生姓名" :width="tableWidth"> </el-table-column>
        <el-table-column prop="registrationFee" label="挂号费用" :width="tableWidth"> </el-table-column>
        <el-table-column prop="patientName" label="就诊人姓名" :width="tableWidth"> </el-table-column>
        <el-table-column prop="idCardType" label="证件类型" :width="tableWidth"> </el-table-column>
        <el-table-column prop="idCardNumber" label="有效证件号" :width="tableWidth"> </el-table-column>
        <el-table-column prop="reservationTime" label="预约时间" :width="tableWidth"> </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import SearchAdd from '@/components/SearchAdd.vue';
import { getAllReservations,deletereservation,getReservationBynum} from '@/api/secondary_page/reservation_manage'
import { ElMessage } from 'element-plus'
export default {
    name:"PageReservationManage",
    data() {
      return {
        untableWidth:'(calc(100% - 220))/10',
        tableWidth:'(calc(100% - 220))/8',
        title:'',
        tabName:'uncancelled',
        isShow:false,//添加or修改
        dialogFormVisible:false,//弹窗开关
        tableData: [],//后台返回数据
        multipleSelection: [],//多选选中行数据
        reservation:{//就诊人对象
            reservationId:'',
            reservationNumber:'',
            registrationFee:'',
            patientName:'',
            idCardType:'',
            doctorName:'',
            idCardNumber:'',
            reservationTime:'',
            flag:0
        },
      }
    },
  methods:{
      //获取文章函数
      getAllReservation(){
        getAllReservations(this.reservation).then(
          response =>{
            console.log(response);
            this.tableData = response;
          }
        )
      },
       //获取文章信息请求处理
      request(tab){
        this.reservation ={}
        if(tab.props.name=='uncancelled'){
          this.reservation.flag = 0
        }else{
          this.reservation.flag = 1
        }
        this.getAllReservation()
      },
      //多选函数
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      //获取el-table选中行数据
      test(row){
        this.reservation = row
          if(this.multipleSelection.length == 0){
            this.multipleSelection.push(row)
          }else{
            this.multipleSelection.forEach((item)=>{
              if(item.reservationId != row.reservationId){
                this.multipleSelection.push(row)
              }
            })
          }
      },
      //弹窗取消函数
      cancel(formName){
        this.openDialog();
        this.$refs[formName].resetFields()
        ElMessage('操作已取消')
        this.reservation = {}
        this.reservation.flag = 0
        this.getAllReservation()
      },
      //格式化数据
      formatter1(row){
          let arr = []
          row.types.forEach((item, index)=>{
            if (index > 2) {
              return
            }
            arr.push(item.typeName);
          })
          return arr.join(',')
        },
      formatter2(row){
        let arr = []
        row.types.forEach((item, index)=>{
          if (index > 2) {
            return
          }
          arr.push(item.typeIcon);
        })
        return arr.join(',')
      },
       //注销函数
        cancellation() {
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.multipleSelection.forEach((item)=>{
              deletereservation(item.reservationId).then(
                response => {
                  if(response == 1){
                    this.$message({
                      type: 'success',
                      message: '删除成功!',
                    })
                    this.reservation = {}
                    this.reservation.flag = 0
                    this.getAllReservation();
                  }else{
                      ElMessage.error('删除失败')
                  }
                }
              )
            })
            this.multipleSelection = []
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
        },
        filterHandler(value, row, column) {
          const property = column['property']
          return row[property] === value
        },
      //搜索函数
      searchReservation(input,type,o){
        console.log(input+'----'+type+'----'+o)
        if(o){
          if(isNaN(input)){
            this.reservation.doctorName = input
            this.reservation.patientName = input
          }else{
            this.reservation.reservationNumber = input
            console.log(this.reservation)
            getReservationBynum(this.reservation).then(
              response=>{
                this.tableData = response
              }
            )
          }
        }
      },
    },
    mounted(){
      this.reservation = {}
      this.reservation.flag = 0
      this.getAllReservation();
    },
    components:{
      SearchAdd,
    }
}
</script>

<style scoped>

</style>
